<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="css/el-index.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div id="father">
    <h2>登录页面</h2>
    <el-form ref="userLoginForm" :model="user" label-width="40px">
        <el-form-item label="账号" prop="username">
            <el-input type="text" v-model="user.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-row>
                <el-button type="primary" @click="submitLoginForm('userLoginForm')">登录</el-button>
                <el-button @click="resetLoginForm('userLoginForm')">重置</el-button>
            </el-row>
        </el-form-item>
    </el-form>
    <div id="bottom">
        <a href="register.html">没有账号，请先注册</a>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/el-index.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        //挂载点
        el:"#father",
        //数据
        data:{
            //用户对象
            user:{}
        },
        //方法
        methods:{
            //提交登录表单
            submitLoginForm(formName){
                //调用axios方法，实现ajax提交
                axios.post('user/login', this.user).then(
                    function(res){
                        if(res.data.message=="200"){
                            location.href="index.html";
                        }
                    }
                );
            },
            //重置登录表单
            resetLoginForm(formName){
                //固定写法--调用vue的函数-重置字段
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>